<template>
  <div>
    <h1>hello vue</h1>
    <button @click="destroyFn">销毁</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      timer: null
    }
  },
  mounted(){
    this.timer = setInterval(()=>{
      console.log("定时器被触发了");
    },1000)
  },
  // 4、销毁阶段 --- v-if控制组件的隐藏（此时就会销毁组件）
  // 销毁前触发
  beforeDestroy(){
    // 清除一些全局的监听事件，或者清除定时器
    clearInterval(this.timer); // 清除定时器
    console.log("beforeDestroy");
  },
  // 销毁后触发
  destroyed(){
    console.log("destroyed");
  },
  methods: {
    destroyFn(){
      // vue提供的$destroy销毁组件方法
      this.$destroy();
    }
  }
}
</script>

<style>

</style>